﻿<!DOCTYPE html>
<html>

<head>

    <!-- main.js(inline js会触发csp) -->
    <script src="main.js"></script>
    <!-- 导入 vis.js 库-->
    <script type="text/javascript" src="./vis/vis.min.js"></script>

    <!--导入思维导图和图谱js文件-->
    <script src="js/mindmap.js"></script>
    <script src="js/graph.js"></script>
    <!-- 导入 vis.js 的 CSS 样式 -->
    <link rel="stylesheet" type="text/css" href="./vis/vis.min.css">

    <!--导入w3.css库 和font-awesome.min.css-->
    <link rel="stylesheet" type="text/css" href="css/w3.css">

    <link rel="stylesheet" type="text/css" href="css/icon.css">

    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
  
    <!--导入main.css库-->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" charset="UTF-8">



    <style>
        body {
            background-color: rgb(252, 255, 252);
        }

        .container {
            position: absolute;
            width: 100%;
            height: 100%;
            /* 设置容器的高度为视口高度的100% */
        }
        
    </style>


</head>

<body>

    <div class="container">

        <div class="w3-bar " style="width:100%;left:0%;height:7.5%;position: fixed;display: flex; justify-content:space-between;background: linear-gradient(to left, #3d7a56, transparent);">
            
            <div style="left:1%;width:60%;padding-left:2%;height: 100%;display: flex;flex-direction:column">

                <span class="bar_font1">
                    <img src = "png/logo.png" class="img_logo"></img>VidBot </span>
                <span class="bar_font2">&nbsp;视学知识助手</span>

            </div>

            <div style="width:60%;padding-left:2%;height: 100%;display: inline-flex;">

                <button id="bar_star_button" class="bar_icon_button" style="font-size: 3.5vh;"><i class="fa fa-star " ></i></button>
                <button id="bar_record_button" class="bar_icon_button" style="font-size: 3.5vh;"><i class="fa fa-clock-o"></i></button>
                <button id="bar_tools_button" class="bar_icon_button" style="font-size: 3.5vh;"><i class="fa fa-ellipsis-h"></i></button>
                <button id="close_button" class="close_icon_button" style="font-size: 3.5vh;"><i class="fa fa-close"></i></button>

            </div>

        </div>



        <div id="function-bar" style="width:95%;left:2%;position: fixed;top:8.7%;height:5%;display: flex; justify-content:space-between">
            <button id="mindmap_button" class=" mindmap_button "
                style="width:23%;left:2%;position: relative; padding: 2%;"><b style="font-size: 3.5vw">思维导图</b></button>
            <button id="graph_button" class="graph_button"
                style="width:23%;left:2%;position: relative;padding: 2%;"><b style="font-size: 3.5vw">知识图谱</b></button>

            <button id="assistant_button" class="chat_button"
                style="width:23%;left:2%;position: relative;padding: 2%;"><b style="font-size: 3.5vw">智能助教</b></button>
            <button id="blackboard_button" class="markdown_button"
                style="width:23%;left:2%;position: relative;padding: 2%;"><b style="font-size: 3.5vw">共享笔记</b></button>
            <!-- 添加更多按钮，如果需要 -->
        </div>

        <div style="width:100%;position: fixed;top:13.5%;display: flex; justify-content:flex-end">

            <a href="#" class="w3-button w3-small"><i class="fa fa-paint-brush "style="font-size: 5vw;"></i></a>
            <a href="#" class="w3-button w3-small"><i class="fa fa-pencil"style="font-size: 5vw;"></i></a>
            <a href="#" class="w3-button w3-small"><i class="fa fa-file-text"style="font-size: 5vw;"></i></a>
            <a href="#" class="w3-button w3-small"><i class="fa fa-download"style="font-size: 5vw;"></i></a>


        </div>

        <div id="contentContainer" style="width:90%;height:80%;top:18.5%;left:5%;position: fixed;">
            <!-- 页面内容 -->
        </div>


    </div>

</body>

</html>